<script setup lang="ts">
import type { IconifyIcon } from '@iconify/vue'
import type { ButtonProps, TooltipProps } from 'naive-ui'
interface Props {
  type?: ButtonProps['type']
  icon?: string | IconifyIcon
  size?: number | string
  color?: string
  btnProps?: ButtonProps
  tooltip?: string
  tooltipProps?: TooltipProps
}
withDefaults(defineProps<Props>(), {
  size: 20,
})
</script>

<template>
  <n-tooltip v-if="tooltip">
    <template #trigger>
      <n-button :type="type" class="px-2" strong secondary v-bind="{ ...btnProps, ...$attrs }">
        <template #icon>
          <w-icon :icon="icon" :size="size" :color="color">
            <slot v-if="$slots.default"></slot>
          </w-icon>
        </template>
      </n-button>
    </template>
    <span>{{ tooltip }}</span>
  </n-tooltip>
  <n-button v-else :type="type" class="px-2" strong secondary v-bind="{ ...btnProps, ...$attrs }">
    <template #icon>
      <w-icon :icon="icon" :size="size" :color="color">
        <slot v-if="$slots.default"></slot>
      </w-icon>
    </template>
  </n-button>
</template>

<style scoped lang="scss"></style>
